<template>
  <div style="padding: 5px">
  <van-button type="primary" plain hairline size="large" @click="goGroup()"  icon="plus">添加分组</van-button>
  <van-collapse v-model="activeName" accordion @change="groupChange" style="margin-top: 5px">
    <van-collapse-item :name="item.id" icon="guide-o" v-for="(item,index) in groupList" :key="index">
      <template #title>
        <div>{{ item.name }}
          <van-icon name="question-o" style="color: red" v-if="item.status === 1"/>
        </div>
      </template>
      <van-grid :gutter="10">
        <van-grid-item
            icon="plus"
            icon-color="#07c160"
            text="点击添加"
            class="grid-item"
            @click="goAdd(item.id)"
        >
        </van-grid-item>
        <van-grid-item
            v-for="(i,k) in treeList"
            :key="k"
            icon="flower-o"
            :text="'' + i.index"
            :badge="getBadge(i)"
            class="grid-item"
            @click="goDetail(i)"
            @contextmenu.prevent="rightClick"
        >
        </van-grid-item>

      </van-grid>
    </van-collapse-item>
  </van-collapse>
  </div>
  <van-divider>已经到最底啦</van-divider>
  <p style="height: 30px"></p>
</template>
<script setup lang="ts" name="Home">
import {ref} from "vue";
import group from '../../api/group.ts'
import {Group, Tree} from "../../type.ts";
import tree from  "../../api/tree.ts"
import {useRoute, useRouter} from "vue-router";
import {setTreeTabNumber} from "../../layout/index.data.ts";
const route = useRoute();
const router = useRouter();

const groupList = ref<Group[]>([]);
function reload(){
   group.queryList().then((res:any)=>{
     groupList.value = res;
     if(activeName.value){
       reloadtree(activeName.value)
     }
     getNotice()
   })
}
reload()

function getNotice(){
  tree.queryNotice().then((res:any)=>{
    setTreeTabNumber(res)
  })
}
const treeList = ref<Tree[]>([])
function reloadtree(groupId){
  tree.queryList(groupId).then((res:any)=>{
    treeList.value = res
  })
}
const activeName = ref(route.query.groupId as string || '');

function getBadge(item){
  const r = item.risk.split(',').filter(x=> x!= '')
  return r.length === 0 ? '' : r.length;
}
function groupChange(groupId){
  treeList.value = []
  reloadtree(groupId)
}
function goDetail({groupId,id}) {
  router.push({path: "/tree/detail",query:{groupId,id}});
}
function goAdd(groupId){
  router.push({path: "/tree/add",query:{groupId}});
}

function goGroup(){
  router.push({path: "/tree/group"});
}
function rightClick(){
  console.log(1)
}
</script>
<style scoped>
.grid-item:hover {
  cursor: pointer;
}
footer{
  height: 50px;
  line-height: 50px;
}
</style>
